<template>
	<view class="page-review">
		<view class="headnavi">
			<image class="arrow" src="/static/home/main/details/arrow.png" @click="goBack()"></image>
			<view class="navi-title">编辑评价</view>
		</view>

		<div class="shop">
			<div class="img">
				<image :src="image" alt="" />
			</div>
			<div class="shop-text">
				<div class="tag-rate">
					<div class="tag"> 菜品</div>
					<uni-rate v-model="stars" @change="onChange" size=6vw class="rate" allowHalf active-color="#FF8D1A"
						readonly />
				</div>
				<div class="shop-name">{{dishname}}</div>
			</div>
		</div>


		<view class="inputcontainer">

			<view class="hint">您的评分</view>
			<uni-rate v-model="value" class="rate" active-color="#FF8D1A" size="55" max="5" allow-half="true" />

			<uni-easyinput class="input" type="textarea" placeholder="请输入评价" v-model="text"></uni-easyinput>
			<view class="picturecontainer">
				<image :src="button1img" class="upload-button fade-in delay-0" @click="upload1()" />
				<image v-if="button1" :src="button2img" class="upload-button fade-in delay-1" @click="upload2()" />
				<image v-if="button2" :src="button3img" class="upload-button fade-in delay-2" @click="upload3()" />
				<image v-if="button3" :src="button4img" class="upload-button fade-in delay-0" @click="upload4()" />
				<image v-if="button4" :src="button5img" class="upload-button fade-in delay-1" @click="upload5()" />
				<image v-if="button5" :src="button6img" class="upload-button fade-in delay-2" @click="upload6()" />
				<image v-if="button6" :src="button7img" class="upload-button fade-in delay-0" @click="upload7()" />
				<image v-if="button7" :src="button8img" class="upload-button fade-in delay-1" @click="upload8()" />
				<image v-if="button8" :src="button9img" class="upload-button fade-in delay-2" @click="upload9()" />
			</view>
		</view>


		<div class="submit" @click="submit">发布</div>






	</view>
</template>

<script>
	export default {
		data() {
			return {
				button1: false,
				button2: false,
				button3: false,
				button4: false,
				button5: false,
				button6: false,
				button7: false,
				button8: false,
				button9: false,
				imgurl: "",
				defaultUploadImg: "../../static/chishenme/addPicture.png",
				button1img: "../../static/chishenme/addPicture.png",
				button2img: "../../static/chishenme/addPicture.png",
				button3img: "../../static/chishenme/addPicture.png",
				button4img: "../../static/chishenme/addPicture.png",
				button5img: "../../static/chishenme/addPicture.png",
				button6img: "../../static/chishenme/addPicture.png",
				button7img: "../../static/chishenme/addPicture.png",
				button8img: "../../static/chishenme/addPicture.png",
				button9img: "../../static/chishenme/addPicture.png",
				uploadImgurls: [],
				id: 1,
				dishname: "",
				stars: "",
				restaurantId: 1,
				value: 0,
				image: "",
				text: "",
				styles: {
					borderColor: "#FF8D1A"
				}
			};
		},
		onLoad(options) {
			this.id = options.id;
			this.dishname = options.name;
			this.stars = options.stars;
			this.image = options.image;
			this.restaurantId = options.restaurantId;

			// Use the parameters as needed
			console.log(options);
		},
		methods: {
			goBack() {
				console.log('返回')
				uni.navigateBack();
			},
			uploadFile(file, index) {
				uni.showLoading({
					title: '上传中',
					mask: true
				});
				uni.uploadFile({
					url: 'http://localhost:8080/image/upload', // 服务器的地址，确保与实际部署的地址相符
					filePath: file,
					name: 'file', // 服务器端接收文件的字段名，与multer中间件配置的一致
					success: res => {
						console.log("上传后获得的文件地址");
						// console.log(res.data); 
						const jsonString = res.data;
						const jsonObject = JSON.parse(jsonString);
						const id11 = jsonObject.data;

						this.uploadImgurls[index] = id11;
						uni.hideLoading();
						console.log(this.uploadImgurls);
						// 上传成功后的处理逻辑
						// uni.request({          //获取图片
						// 	url: 'http://localhost:8080/image/getImage?id='+id11,
						// 	method: 'GET',
						// 	success: res1 => {
						// 			// console.log("根据文件地址获得的base64编码图片"); 
						// 			// console.log(res1.data.data.data)
						// 			// 将base64字符串转换为ArrayBuffer格式
						// 			const arrayBuffer = uni.base64ToArrayBuffer(res1.data.data.data);
						// 			// 将ArrayBuffer转换为Blob对象
						// 			const blob = new Blob([arrayBuffer], { type: 'image/png' });
						// 			// 创建Blob URL
						// 			const imgUrl = URL.createObjectURL(blob);

						// 			// this.button1img = imgUrl;


						// 			
						// 	},
						// 	fail: (err) => {
						// 		console.error(err);
						// 		// 在这里处理请求失败的逻辑
						// 	}
						// });
					},
					fail: err => {
						console.log(err);
						uni.hideLoading();
						uni.showToast({
							title: '上传失败', //显示的文字
							duration: 1000, //显示多少时间，默认1500毫秒
							icon: "error", //自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
							mask: true,
						})
					}
				});

			},
			upload1() {
				//显示加载框

				uni.chooseImage({
					count: 1,
					success: res => {
						const tempFilePaths = res.tempFilePaths;
						this.button1img = tempFilePaths[0];
						this.uploadFile(tempFilePaths[0], 1);
						this.button1 = true;
					},
					fail: err => {
						console.log(err);
						uni.hideLoading();
					},
				});
			},
			upload2() {
				uni.chooseImage({
					count: 1, // 限制选择的图片数量
					success: res => {
						const tempFilePaths = res.tempFilePaths; // 选择的图片临时文件路径
						// 处理上传逻辑，将图片上传到服务器或进行其他操作
						this.button2img = tempFilePaths[0];
						this.uploadFile(tempFilePaths[0], 2);
						this.button2 = true;
					},
					fail: err => {
						console.log(err);
						uni.hideLoading();
					}
				});
			},
			upload3() {
				uni.chooseImage({
					count: 1, // 限制选择的图片数量
					success: res => {
						const tempFilePaths = res.tempFilePaths; // 选择的图片临时文件路径
						// 处理上传逻辑，将图片上传到服务器或进行其他操作
						this.button3img = tempFilePaths[0];
						this.uploadFile(tempFilePaths[0], 3);
						this.button3 = true;
					},
					fail: err => {
						console.log(err);
						uni.hideLoading();
					}
				});
			},
			upload4() {
				uni.chooseImage({
					count: 1, // 限制选择的图片数量
					success: res => {
						const tempFilePaths = res.tempFilePaths; // 选择的图片临时文件路径
						// 处理上传逻辑，将图片上传到服务器或进行其他操作
						this.button4img = tempFilePaths[0];
						this.uploadFile(tempFilePaths[0], 4);
						this.button4 = true;
					},
					fail: err => {
						console.log(err);
						uni.hideLoading();
					}
				});
			},
			upload5() {
				uni.chooseImage({
					count: 1, // 限制选择的图片数量
					success: res => {
						const tempFilePaths = res.tempFilePaths; // 选择的图片临时文件路径
						// 处理上传逻辑，将图片上传到服务器或进行其他操作
						this.button5img = tempFilePaths[0];
						this.uploadFile(tempFilePaths[0], 5);
						this.button5 = true;
					},
					fail: err => {
						console.log(err);
						uni.hideLoading();
					}
				});
			},
			upload6() {
				uni.chooseImage({
					count: 1, // 限制选择的图片数量
					success: res => {
						const tempFilePaths = res.tempFilePaths; // 选择的图片临时文件路径
						// 处理上传逻辑，将图片上传到服务器或进行其他操作
						this.button6img = tempFilePaths[0];
						this.uploadFile(tempFilePaths[0], 6);
						this.button6 = true;
					},
					fail: err => {
						console.log(err);
						uni.hideLoading();
					}
				});
			},
			upload7() {
				uni.chooseImage({
					count: 1, // 限制选择的图片数量
					success: res => {
						const tempFilePaths = res.tempFilePaths; // 选择的图片临时文件路径
						// 处理上传逻辑，将图片上传到服务器或进行其他操作
						this.button7img = tempFilePaths[0];
						this.uploadFile(tempFilePaths[0], 7);
						this.button7 = true;
					},
					fail: err => {
						console.log(err);
						uni.hideLoading();
					}
				});
			},
			upload8() {
				uni.chooseImage({
					count: 1, // 限制选择的图片数量
					success: res => {
						const tempFilePaths = res.tempFilePaths; // 选择的图片临时文件路径
						// 处理上传逻辑，将图片上传到服务器或进行其他操作
						this.button8img = tempFilePaths[0];
						this.uploadFile(tempFilePaths[0], 8);
						this.button8 = true;
					},
					fail: err => {
						console.log(err);
						uni.hideLoading();
					}
				});
			},
			upload9() {
				uni.chooseImage({
					count: 1, // 限制选择的图片数量
					success: res => {
						const tempFilePaths = res.tempFilePaths; // 选择的图片临时文件路径
						// 处理上传逻辑，将图片上传到服务器或进行其他操作
						this.button9img = tempFilePaths[0];
						this.uploadFile(tempFilePaths[0], 9);
						this.button9 = true;
					},
					fail: err => {
						console.log(err);
						uni.hideLoading();
					}
				});
			},
			submit() {
				uni.request({
					url: 'http://localhost:8080/posting/getNowPosting',
					method: 'GET',
					success: res => {
						const newId = res.data.data;
						const userInfo = uni.getStorageSync('userInfo');
						// 在你的页面或组件中
						const formData = {
							id: newId,
							userId: userInfo.data.id,
							content: this.text,
							// restaurantId:this.restaurantId,
							dishId: this.id,
							pictureUrl1: this.uploadImgurls[1],
							pictureUrl2: this.uploadImgurls[2],
							pictureUrl3: this.uploadImgurls[3],
							pictureUrl4: this.uploadImgurls[4],
							pictureUrl5: this.uploadImgurls[5],
							pictureUrl6: this.uploadImgurls[6],
							pictureUrl7: this.uploadImgurls[7],
							pictureUrl8: this.uploadImgurls[8],
							pictureUrl9: this.uploadImgurls[9],
							stars: this.value,
						};
						console.log("当前帖子formData");
						console.log(formData);
						if (formData.content === "") {

							uni.showToast({
								title: '请输入内容', //显示的文字
								duration: 1000, //显示多少时间，默认1500毫秒
								icon: "error", //自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
								mask: true,
							})
							return;
						};
						if (formData.rate === 0) {

							uni.showToast({
								title: '请选择评分', //显示的文字
								duration: 1000, //显示多少时间，默认1500毫秒
								icon: "error", //自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
								mask: true,
							})
							return;
						};

						uni.request({
<<<<<<< HEAD
							url: 'http://localhost:8080/posting/addPost',
							method: 'POST',
							data: formData,

							success: function(res) {
								// 请求成功的回调函数
								console.log(res.data);
								uni.showToast({
									title: '发送成功', //显示的文字
									duration: 1000, //显示多少时间，默认1500毫秒
									icon: "success", //自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
									mask: true,
								})
								setTimeout(() => {
									/* const url='/pages/details/details?id='+this.id;
									uni.navigateTo({
										url:url,
									}) */
									uni.navigateBack()
								}, 1000)
							},
							fail: function(err) {
								// 请求失败的回调函数
								console.log(err);
							}
=======
						  url: 'http://8.138.90.16:8080/posting/addPost',
						  method: 'POST',
						  data: formData,
						 
						  success: function (res) {
						    // 请求成功的回调函数
						    console.log(res.data);
							uni.showToast({
									title: '发送成功',//显示的文字
							        duration: 1000,  //显示多少时间，默认1500毫秒
							        icon: "success"  ,//自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
									mask:true,
							})
							setTimeout(()=>{
								uni.navigateBack();
								
							},1000)
						  },
						  fail: function (err) {
						    // 请求失败的回调函数
						    console.log(err);
						  }
>>>>>>> cf370fbbdd0e2619b30401affbcab9dcb463763f
						});
					},
					fail: (err) => {
						console.error(err);
						// 在这里处理请求失败的逻辑
					}
				});




			}
		}
	}
</script>

<style lang="scss">
	.page-review {
		display: flex;
		flex-direction: column;

		.headnavi {
			height: 10%;
			width: 100%;
			background-color: white;
			position: fixed;
			display: flex;
			z-index: 2;

			.arrow {

				width: 6vw;
				height: 3vh;
				margin-top: 5vh;
				margin-left: 5vw;
			}

			.navi-title {
				margin-top: 5vh;
				margin-left: 220rpx;
				font-size: 40rpx;
				color: orange;
			}
		}

		.shop {
			margin-top: 11vh;
			background-color: white;
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 10vh;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

			.img {
				width: 20vw;
				height: 20vw;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				background-color: transparent;
				margin: 0;
				padding-left: 10rpx;

				image {
					width: 90%;
					height: 90%;
				}
			}

			.shop-text {

				display: flex;
				flex-direction: column;

				.tag-rate {
					display: flex;

					.tag {
						background-color: #A6A6A6;
						width: 60rpx;
						color: #E3E3E3;
						font-size: 25rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 10rpx;
					}

					.rate {
						margin: 0 1vw;

					}
				}

				.shop-name {
					font-size: 50rpx;
					margin-top: 1vh;
				}
			}
		}

		.user-header {
			background-color: #FFFFFF;
			flex-direction: row;
			display: flex;
			width: 100%;
			height: 8vh;
			margin-top: 10vh;

			.avatar {
				margin-left: 6vw;
				width: 80rpx;
				height: 80rpx;
			}

			.user-name {
				margin-top: 1vh;
				margin-left: 2vw;
			}
		}

		.inputcontainer {
			margin-top: 1vh;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			margin: 13px;

			.hint {
				background-color: #FF9122;
				color: white;
				padding: 10px;
				border-radius: 5px;
				font-size: 16px;
				font-weight: bold;
				text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
			}

			.rate {
				margin-left: 10rpx;
				margin-top: 20rpx;
				background-color: #d4d4d4;
				border-radius: 20rpx;
			}
		}


		.input {
			width: 90vw;
			height: 10vh;
			border: none;
			border-radius: 10px;
			padding: 10px;
			font-size: 5vw;

		}

		.picturecontainer {
			width: 100vw;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			margin-bottom: 3vh;
		}

		.upload-button {
			width: 25vw;
			height: 25vw;
			border: none;
			margin: 10px;
			font-size: 16px;
			color: #fff;
			background-image: url("../../static/chishenme/addPicture.png");
			background-size: cover;
			background-position: center;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			opacity: 0;
			transition: opacity 0.5s ease-in-out;
			border-radius: 15px;
		}

		.fade-in {
			animation: fade-in 0.5s forwards;
		}

		.delay-0 {
			animation-delay: 0s;
		}

		.delay-1 {
			animation-delay: 0.2s;
		}

		.delay-2 {
			animation-delay: 0.4s;
		}

		@keyframes fade-in {
			from {
				opacity: 0;
			}

			to {
				opacity: 1;
			}
		}

		.ratecontainer {
			width: 100%;
			height: 120rpx;
			position: fixed;
			margin-top: 92vh;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: row;


		}

		.submit {
			width: 96vw;
			height: 80rpx;
			background-color: #FF9122;
			color: white;
			margin: 2vw;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 5vw;
		}
	}
</style>